<template>
  <m-layout>
    <mt-header slot="header" title="历史成绩">
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body">
      <m-section class="history">
        <e-heading>{{query.testMethodName}}</e-heading>
        <div v-if="studentScore.list && studentScore.list.length"
             v-infinite-scroll="handleLoadMore"
             infinite-scroll-distance="50"
             infinite-scroll-immediate-check="false">
          <m-flexbox class="history-header weak" justify="space-between">
            <div>测试评级</div>
            <div>测试成绩</div>
            <div>测试日期</div>
          </m-flexbox>
          <router-link v-for="item in studentScore.list"
                       :key="item.id"
                       :to="{
                         path: '/smartCourse/scoresDetail',
                         query:{
                           studentId: query.studentId,
                           levelId: query.levelId,
                           testModeId: query.testModeId,
                           testMethodId: query.testMethodId,
                           testItemText: query.testItemText,
                           testMethodName: query.testMethodName,
                           ageGroupText: query.ageGroupText,
                           testDate: item.testDate
                       }}">
            <m-flexbox class="history-scores small" justify="space-between">
              <div class="history-scores-level">{{item.testScoreLevel}}</div>
              <div class="history-scores-value">{{item.testScore}}{{item.testScoreDesc}}</div>
              <div class="weak">
                {{new Date(item.testDate).format()}}
                <e-img class="arrow" src="/static/images/icon/icon_more_2.png" ></e-img>
              </div>
            </m-flexbox>
          </router-link>
        </div>
        <e-placeholder v-else />
      </m-section>
    </div>
  </m-layout>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      studentScore: state => state.smartCourse.studentScore
    })
  },
  data () {
    return {
      query: this.$route.query
    }
  },
  mounted () {
    this.$page = 1
    this.getStudentScoreByMethodId()
  },
  methods: {
    handleLoadMore () {
      this.$page++
      this.getStudentScoreByMethodId({
        page: this.$page
      })
    },
    getStudentScoreByMethodId (param = {}) {
      this.$store.dispatch('smartCourse/getStudentScoreByMethodId', Object.assign({}, {
        studentId: this.query.studentId,
        levelId: this.query.levelId,
        testModeId: this.query.testModeId,
        testMethodId: this.query.testMethodId,
        page: 1,
        rows: 10
      }, param))
    }
  }
}
</script>
<style lang="scss" scoped>
.history{
  &-header{
    height: 1rem;
    padding: 0 .66rem;
  }
  &-scores{
    height: 1rem;
    padding: 0 .2rem 0 .66rem;
    .arrow{
      width: .3rem;
    }
    &-value{
      width: 30%;
      text-align: center;
    }
    &-level{
      width: 20%;
    }
    .weak{
      .arrow{
        margin-left: .2rem;
      }
    }
  }
}
</style>
